// # Ӧ�õĸ����������·�ɵ�


import React, { Suspense } from 'react';
import { Routes, Route } from 'react-router-dom';

// ��̬���ظ���ҳ�������ʵ�ִ���ָ
const HomePage = React.lazy(() => import('./pages/HomePage/HomePage'));
const AboutPage = React.lazy(() => import('./pages/AboutPage'));
const BooKshelf = React.lazy(() => import('./pages/bookshelf/bookshelf'));
const Cvans = React.lazy(() => import('./pages/cvans/cvans'));

// ·����������
const routes = [
  { path: '/', element: <HomePage /> },
  { path: '/about', element: <AboutPage /> },
  { path: '/bookshelf', element: <BooKshelf /> },
  { path: '/cvans', element: <Cvans /> },
];

const App = () => {
  return (
    // Suspense ����չʾ����״̬
    <Suspense fallback={<div>Loading...</div>}>
      <Routes>
        {routes.map((route, index) => (
          <Route key={index} path={route.path} element={route.element} />
        ))}
      </Routes>
    </Suspense>
  );
};

export default App;
